<template>
  <div class="calcuQuery">
    <div style="display: flex">
      <jc-button
        :btn-arr="['reload']"
        :disab-arr="['close', 'cancel', 'using', 'copy', 'freeze', 'com1', 'com2']"
        @refresh="refresh"
      />
      <el-button style="margin-left: 10px" size="mini" type="primary" @click="credentialsTask">业务凭证生成</el-button>
    </div>
    <div class="header">
      <div class="header-name">
        <span style="font-size: 14px">{{ $t('market.period') }}</span>
        <el-date-picker
          v-model="period"
          type="month"
          value-format="yyyy-MM"
          style="width: 162px"
          :picker-options="pickerOptions"
        />
      </div>
      <!--      当前关账期间-->
      <dataRow ref="mainData" />
    </div>
    <div class="table-content voucher">
      <div class="tabLef">
        <jc-table
          v-loading="loading"
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
          table-selection
          sortable
          @selectionChange="handleSelectAll"
        >
          <template v-slot:billSlot="col">
            <el-select v-model="col.scope.row.mouldId" size="mini">
              <el-option
                v-for="item in col.scope.row.mouldList"
                :key="item.mouldId"
                :label="item.mouldName"
                :value="item.mouldId"
              />
            </el-select>
          </template>
        </jc-table>
      </div>
      <div class="tabRig">
        <jc-table
          :table-data="tableData1"
          :table-header="tableHeader1"
          :table-height="tableHeight"
          serial
          sortable
        >
          <!--  处理进度  -->
          <template v-slot:btnState="col">
            <el-tag v-if="col.scope.row.fisfinished === 0" type="warning">{{ $t('market.inExecution') }}</el-tag>
            <el-tag v-if="col.scope.row.fisfinished === 1" type="success">{{ $t('market.accomplish') }}</el-tag>
          </template>
          <!--  处理结果  -->
          <template v-slot:btnStates="col">
            <el-tag v-if="col.scope.row.fissuccess === 0" type="danger">{{ $t('market.defeated') }}</el-tag>
            <el-tag v-if="col.scope.row.fissuccess === 1" type="success">{{ $t('market.succeed') }}</el-tag>
          </template>
          <!--  操作  -->
          <template v-slot:btnSlot="col">
            <el-button size="mini" type="primary" @click="closingDetail(col.scope.row.ftaskId)">{{ $t('market.detail') }}</el-button>
          </template>
        </jc-table>
        <!--  分页器  -->
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="handleGetUntreated1"
          />
        </div>
      </div>
    </div>
    <!-- 凭证详情 -->
    <task-details v-if="isClosingDialog" :ftask-id="ftaskId" @task="isClosingDialog=false" />
  </div>
</template>

<script>
import jcButton from '@/components/Button'
import dataRow from '@/views/financial/company/components/dataRow'
import { queryBilltypeAndMould, querySettleInfo, queryVouchertaskList } from '@/api/financial/closing'
import { createVoucherTask } from '@/api/financial/cashier'
import taskDetails from '@/views/financial/voucherTemplate/credentialsTask/components/taskDetails'

export default {
  name: 'CalculVoucher',
  components: {
    taskDetails,
    dataRow,
    jcButton
  },
  data() {
    return {
      pickerOptions: {},
      loading: false,
      isClosingDialog: false,
      period: '',
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      // 表头
      tableData: [], // 销售数据
      tableHeight: '70vh',
      tableHeader: [
        { label: this.$t('market.billType'), prop: 'billtype', width: '130' },
        { label: this.$t('market.vouchername'), type: 'bill', prop: 'mouldName', width: '200' }
      ],
      tableData1: [],
      tableHeader1: [
        { label: this.$t('market.period'), prop: 'fdate', minWidth: '80' },
        { label: this.$t('market.companyname'), prop: 'fcompanyname', minWidth: '180' },
        { label: this.$t('market.operator'), prop: 'fhandleName', minWidth: '80' },
        { label: this.$t('market.configDate'), prop: 'fhandledate', minWidth: '90' },
        { label: this.$t('market.progress'), type: 'state', prop: 'fisfinished', minWidth: '80' },
        { label: this.$t('market.finishTime'), prop: 'ffinishedtime', minWidth: '130' },
        { label: this.$t('market.issuccess'), prop: 'fissuccess', minWidth: '180' },
        { label: this.$t('market.handle'), type: 'btn', minWidth: '100' }
      ]
    }
  },
  created() {
    this.handleGetUntreated()
    this.handleGetUntreated1()
    this.querySettle()
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 230px)' : '73vh'
  },
  methods: {
    refresh() {
      this.handleGetUntreated()
      this.handleGetUntreated1()
    },
    // 详情
    closingDetail(id) {
      this.isClosingDialog = true
      this.ftaskId = id
    },
    // 查询不可选日期
    querySettle() {
      querySettleInfo({}).then(res => {
        this.pickerOptions = {
          // 日期禁止输入
          disabledDate(time) {
            return time.getFullYear() <= res.data.year && time.getMonth() <= res.data.month - 1
          }
        }
      })
    },
    // 获取列表数据-左侧
    async handleGetUntreated() {
      this.loading = true
      const RES = await queryBilltypeAndMould({ fclosetype: 0 })
      if (RES.code === 0) {
        this.loading = false
        this.tableData = RES.data.map(res => {
          if (res.mouldList.length > 0) res.mouldId = res.mouldList[0].mouldId
          return res
        })
      } else {
        this.loading = false
        this.$confirm(RES.message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
      }
    },
    // 获取凭证任务列表数据-右侧
    async handleGetUntreated1(ev) {
      this.loading = true
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = { pageNum: this.currentPage, pageSize: this.size }
      const RES = await queryVouchertaskList(DATA)
      if (RES.code === 0) {
        this.loading = false
        this.tableData1 = RES.data.list
        this.total = RES.data.total
      } else {
        this.loading = false
        this.$confirm(RES.message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
      }
    },
    // 全选
    handleSelectAll(val) {
      this.taskList = []
      val.forEach(item => {
        item.mouldId && this.taskList.push({
          enumId: item.enumId,
          mouldId: item.mouldId
        })
      })
    },
    // 凭证生成
    credentialsTask() {
      if (!this.period) {
        this.$message({ showClose: true, message: '请选择期间!', type: 'warning' })
        return
      }
      const DATA = {
        fdate: this.period,
        taskList: this.taskList
      }
      createVoucherTask(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
          this.handleGetUntreated1()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.calcuQuery {
  @include listBom;
  .voucher {
    display: flex;
    width: 100%;
    .tabLef {
      width: 400px;
    }
    .tabRig{
      flex-grow: 1;
      margin-left: 5px;
    }
  }
  .header{
    .header-name{
      span {
        width: 100px;
        margin-right: 10px;
        text-align: right;
      }
    }
  }
}
</style>
